<script setup>
import { showFailToast, showSuccessToast } from 'vant';
import { ref, onMounted } from 'vue';
import router from '@/router';
import {
    reqPublicClassDetail,
    reqDeletePublicClassNote
} from '@/api/teacher/record/publicClass';
import { useRoute } from 'vue-router';
import { useTeacherStore } from '@/stores/modules/teacherStore.js';

const teacherStore = useTeacherStore();

const route = useRoute();

// 是否显示dialog
const isShowDialog = ref(false);

// 详情信息
const note = ref({});

// 状态
const state = ref('');

const getDetail = async () => {
    try {
        const result = await reqPublicClassDetail(route.query.id);

        if (result.status == 200) {
            note.value = result.data;

            switch (result.data.managerStatus) {
                case 0:
                    state.value = '等待管理员审核';
                    if (result.data.appointmentProgress == 0) {
                        state.value = '等待部门领导审核';
                    }
                    if (result.data.appointmentProgress == 2) {
                        state.value = '部门领导未通过';
                    }
                    break;
                case 1:
                    state.value = '已通过';
                    break;
                case 2:
                    state.value = '管理员未通过';
                    break;
            }
        } else {
            throw new Error(result.statusText);
        }
    } catch (e) {
        showFailToast(e.message || '获取用户数据失败');
        router.go(-1);
    }
};

// 取消预约
const cancel = async () => {
    try {
        const result = await reqDeletePublicClassNote(route.query.id);

        if (result.status == 200) {
            showSuccessToast('删除成功, 5秒之后自动返回主页');
            const timer = setTimeout(() => {
                clearTimeout(timer);
                router.push({ name: 'reservation-index' });
            }, 5000);
        } else {
            throw new Error(result.statusText);
        }
    } catch (e) {
        showFailToast(e.message || '删除失败');
        router.go(-1);
    }
};

onMounted(() => {
    getDetail();
});
</script>

<template>
    <div class="container">
        <div class="heading">公共教师预约</div>
        <el-descriptions :column="1" class="wrapper-content" size="large">
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="申请人"
            >
                {{ note.name }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="所带班级"
            >
                {{ note.className }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="电话"
            >
                {{ note.phone }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="工号"
            >
                {{ note.number }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="使用时间"
            >
                {{ note.date }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="使用部门"
            >
                {{ note.useDepartment }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="具体用途"
            >
                {{ note.specificApplications }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="具体人数"
            >
                {{ note.people }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="具体教室数量"
            >
                {{ note.classroomQuantity }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="预约进度"
            >
                {{ state }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="教室详情"
            >
                {{ note.classroomInfo }}
            </el-descriptions-item>
        </el-descriptions>

        <div class="btn-wrapper">
            <el-button type="primary" size="large" @click="isShowDialog = true">
                取消预约
            </el-button>
        </div>

        <el-dialog v-model="isShowDialog" width="80%">
            <p class="cancel-tip">确认取消预约?</p>
            <template #footer>
                <span class="dialog-footer">
                    <span>
                        <el-button @click="isShowDialog = false">
                            不确定
                        </el-button>
                        <el-button type="primary" @click="cancel">
                            确定
                        </el-button>
                    </span>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.container {
    font-size: 16rem;
    background-color: rgb(247, 247, 247);
}

.heading {
    font-size: 20rem;
    font-weight: bold;
    text-align: center;
    width: 70%;
    margin: auto;
    border-bottom: 1px solid #333;
    height: 60rem;
    line-height: 70rem;
    margin-bottom: 20rem;
}

.wrapper-content {
    padding: 0 40rem;
}

.btn-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

:deep(.content) {
    font-size: 18rem !important;
}

.cancel-tip {
    font-size: 16rem;
}
</style>
